<template>
    <div> 
        <el-table :data="tableData" style="width: 100%" stripe row-key="id">
            <el-table-column width="100">
                <template #default>
                    <div class="move-icon">
                        <el-button color="forestgreen" size="small">移动</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column   type="expand">
                <template #default>
                    <div class="moon">
                        <el-icon><MoonNight /></el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="num"  >
                <template #default="scope">
                    <div>
                        <div>{{ scope.row.num }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="Name" >
                <template #default="scope">
                    <div>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column label="id" >
                <template #default="scope">
                    <div>{{ scope.row.id}}</div>
                </template>
            </el-table-column>
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button>
                    <el-button  size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <el-table :data="tableData">
                <el-table-column label="Name" >
                    <template #default="scope">
                        <div>{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="id" >
                    <template #default="scope">
                        <div>{{ scope.row.id}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="Operations">
                    <template #default="scope">
                        <el-button size="small" @click="handleEditDialog(scope.$index, scope.row)" >Edit</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <el-dialog v-model="dialogShow" class='dialogWrap'>
            111
        </el-dialog>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { Timer,MoonNight } from '@element-plus/icons-vue'
import { Sortable} from 'sortablejs'
export default defineComponent({
    name: 'sevenTwo',
    components:{
        Timer,MoonNight
    },
    setup() {
        interface User {
            date: string
            name: string
            id: number
        }
        const drawer = ref(false)
        const dialogShow = ref(false)
        const handleEdit = (index: number, row: User) => {
            drawer.value = true
            console.log(index, row)
        }
        const handleEditDialog = (index: number, row: User) => {
            dialogShow.value = true
            console.log(index, row)
        }
        const handleDelete = (index: number, row: User) => {
            console.log(index, row)
        }
        const tableData = ref([
            {
                date: '2016-05-03',
                name: 'Tom1',
                id:1,
                num:1,
                
            },
            {
                date: '2016-05-02',
                name: 'Tom3',
                id:2,
                num:2,
            },
            {
                date: '2016-05-04',
                name: 'Tom4',
                id:3,
                num:3,
            },
            {
                date: '2016-05-01',
                name: 'Tom6',
                id:4,
                num:4,
            },
        ])
        // 表格行拖拽
        const rowDrop = () => {
            let tbody:any = document.querySelector(".el-table__body-wrapper tbody");
            Sortable.create(tbody, {
                handle:'.move-icon',
                animation: 150,
                draggable: '.el-table__row', //重点就是这里，指定拖拽的元素，把内容也算在行内
                onEnd(evt: any) {
                    if (evt.oldDraggableIndex !== evt.newDraggableIndex) {
                        let currRow = tableData.value.splice(evt.oldDraggableIndex, 1)[0];
                        tableData.value.splice(evt.newDraggableIndex, 0, currRow);
                    }
                },
            });
        };
        onMounted(()=>{
            rowDrop()
        })

        return {
            tableData,handleDelete,handleEdit,Timer,MoonNight,drawer,handleEditDialog,dialogShow
        }
    }
})
</script>

<style scoped lang="less">
.moon{
    margin: 10px;
}
.dialogWrap{
    background: pink;
}
</style>